前言
昨天跟大家聊完為什麼想做「賽博紓壓診所」這個專題後，今天我們終於要來動手寫程式啦！

老實說，剛開始學前端的時候，看到很多酷炫的網頁，第一直覺都是想去網路上找「有沒有什麼現成的 UI 套件可以套？」但是，這一次我想給自己一個挑戰：完全不依賴任何外部框架或 CSS 套件（像是 Bootstrap 或 Tailwind），全部從最基礎的 HTML5 和 CSS3 開始手刻！

因為只有自己把每一塊磚頭疊上去，才能夠真正了解整個網頁的 DOM 結構是怎麼運作的，這對未來要用 JavaScript 去控制它們（比如說做單頁切換、隱藏顯示）會有超大的幫助~

核心 HTML 結構規劃
這個專題因為是一個「單頁式應用（SPA）」，也就是說使用者從頭到尾都在同一個網址裡，不需要一直重新載入頁面。

於是為了達到這個效果，我把整個網頁拆成了「四大區塊」，並且全部包在一個 裡面。這四個區塊分別是：
1.#welcome-screen（首頁）： 選擇頭像、輸入 Email，以及進入診所的入口。

2.#breathe-screen（深呼吸過場）： 為了營造儀式感，進入測驗前會有一小段跟著吸氣吐氣的動畫。

3.#quiz-screen（測驗畫面）： 顯示題目、進度條，還有我們之後會做的心電圖特效。

4.#result-screen（診斷報告）： 內容非常豐富，會有雷達圖、惡搞處方籤跟匿名發洩牆。

把骨架寫出來
接下來，我們打開編輯器（我是用 VS Code），建立一個 index.html 檔案，然後把基本的宣告跟這四個區塊的骨架寫出來。

你可以直接在編輯器輸入以下這段 Markdown 格式的 HTML 碼：

<!-- 最外層的容器，用來限制網頁寬度跟置中 -->
<div class="container">
    
    <!-- 1. 首頁區塊 -->
    <div id="welcome-screen" class="card">
        <h1>🧠 賽博紓壓診所與解碼器</h1>
        <p>結合廟宇抽籤、六角形能力雷達圖、心電圖暴走與惡搞病歷處方籤的頂級心靈小工具。</p>
        <button class="btn" id="btn-start">進入紓壓診所</button>
    </div>

    <!-- 2. 深呼吸過場區塊（預設隱藏） -->
    <div id="breathe-screen" class="card hidden">
        <h2>🧘 調整呼吸，放鬆心情</h2>
        <div class="breathe-circle" id="breathe-text">吸氣...</div>
    </div>

    <!-- 3. 測驗區塊（預設隱藏） -->
    <div id="quiz-screen" class="card hidden">
        <h2 id="question-text">題目載入中...</h2>
        <div id="options-container"></div>
    </div>

    <!-- 4. 結果報告區塊（預設隱藏） -->
    <div id="result-screen" class="card hidden">
        <h1>🏥 賽博病歷診斷報告</h1>
        <div class="result-score" id="score-display">0%</div>
        <button class="btn" id="btn-restart">重新掛號測驗</button>
    </div>

</div>

*為什麼要加上 hidden 這個 Class？
你有沒有注意到，除了 #welcome-screen 之外，其他的 div 我都偷偷加上了一個 hidden 的 class？

因為我們一開始打開網頁時，只希望使用者看到首頁。之後我們會利用 CSS 寫一行非常簡單的程式碼：.hidden { display: none; }。然後透過 JavaScript，當使用者按下「進入紓壓診所」的按鈕時，就把 #welcome-screen 加上 hidden 藏起來，並把 #breathe-screen 的 hidden 拿掉，這樣就完成了一次不用重新整理網頁的「完美畫面切換」啦！

今日結語與明日預告
今天我們很快地把「賽博紓壓診所」的骨架打好了。現在你如果在瀏覽器打開它，看起來可能還只是一堆很醜的純文字，因為我們還沒幫它「穿衣服」。
明天，Day 03：質感介面設計：CSS 變數與日夜模式（Dark Mode），我會帶大家利用 CSS 變數，不只把版面變漂亮、加上圓角與陰影，還要教你怎麼實作考慮到夜晚使用、能降低眼睛疲勞的「一鍵切換深色/淺色模式」，我們明天見！